<template>
    <view class="wf-item-page">
		<image :src='image[0] || defaultPic' mode='widthFix' lazy-load class="item-img"></image>
		<text>{{item.goodsName}}</text>
        <view class="item-info">
			<van-image :src="item.avatar" round width='48rpx' height='48rpx' lazy-load use-loading-slot>
				<van-loading slot="loading" type="spinner" size="20" vertical />
				<text slot="error">加载失败</text>
			</van-image>
            <text class="user-info-name">{{item.userName}}</text>
            <text class="user-info-price">￥{{item.goodsPrice}}</text>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            require: true
        },
    },
	created() {
		this.image=this.item.goodsImage.split(';')
	},
	data(){
		return{
			image:[],
			defaultPic:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
		}
	}
}
</script>

<style lang="scss" scoped>
.wf-item-page {
    overflow: hidden;
    border-radius: 8px;
	padding: 16upx;
	>text{
		font-size: 28upx;	
		font-weight: 700;
		margin-top: 16upx;
	}
}
.item-img{
	width: 100%;
	height: 100%;
	border-radius: 20upx;
}

.item-info {
	font-family:Source Han Sans CN;
	margin-top: 20upx;
    display: flex;
    align-items: center;
	justify-content: space-between;
	.user-info-name{
		font-size: 24upx;
		font-weight: 350;
		color: #666666;
		margin-right: 16upx;
	}
	.user-info-price{
		float:right;
		font-size: 32upx;
		font-weight: 700;
		color: #FF756A;
	}
}
</style>
